import Vue from 'vue'
import VueRouter from 'vue-router'

//使用路由器懒加载并分组webpackChunkName 
//import Login from '../components/Login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
// import Home from '../components/Home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
//import Welcome from '../components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')
// import User from  '../components/user/User.vue'
const User = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/User.vue')
//import Rights from '../components/power/Rights.vue'
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
//import Roles from '../components/power/Roles.vue'
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')
// import Categories from '../components/goods/Cate.vue'
const Categories = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue')
// import Params from '../components/goods/params.vue'
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/params.vue')
//import  GoodsList  from '../components/goods/GoodsList.vue'
const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/GoodsList.vue')
//import AddGoods from '../components/goods/AddGoods.vue'
const AddGoods = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/AddGoods.vue')
//import Order from '../components/order/Order.vue';
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
//import Reports from '../components/reports/Reports.vue'
const Reports = () => import(/* webpackChunkName: "Order_Report" */ '../components/reports/Reports.vue')






// import Order from './components/order/Order.vue'

// import Report from './components/report/Report.vue'




Vue.use(VueRouter)

const routes = [
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  //当不需要重定向的时候，需要component写上当前路由对应的组件页面
  //登录页面
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  //因为当前路径'/'并没有对应的组件，所以需要重定向到其他路由页面
  {
    path:'/',redirect:'/login' //路由重定向
  },
  //首页
  {
    path:'/home',
    component: Home,
    redirect:'/welcome',
    children:[
      
      {
        path:'/welcome',component:Welcome
      }, 
      //这里的路径使用的是服务器返回数据 path
      //用户列表
      {
        path:'/users', component:User
      },
      //权限列表
      {
        path:'/rights',component:Rights
      },
      //角色列表
      {
        path:'/roles',component:Roles
      },
      //商品分类
      {
        path:'/categories',component:Categories
      },
          //参数设置
       {
            path:'/params',component:Params
        },
        //商品列表
        { path:'/goods',component:GoodsList},
         //商品添加页面
       {path:'/goods/add',component:AddGoods},
       //商品订单
       {path:'/orders',component:Order},
       //
       {path:'/reports',component:Reports}
    ]
  },

 
]

const router = new VueRouter({
  mode: 'history',//去掉路径中的#
  routes
})

//为路由挂在导航守卫
router.beforeEach((to,form,next)=>{
//to 将要访问的对象
//form 代表从哪个路径跳转而来
//next 是一个函数，表示放行；next('/login') 强制跳转
if(to.path==='/login'||to.path==="/") return next();//登录页放行
//获取token
const tokenStr =window.sessionStorage.getItem("vue_shop_token")
//此处没有token则跳转登录
if(!tokenStr) return next('/login') //应该用户名密码验证后台数据的
next()//有表示登录了
})
export default router
